<template>
  <div class="page-baseinfo">
    <el-form :inline="true" :model="searchForm" ref="searchForm">
      <div class="pc-page-header">
        <el-form-item  prop="id">
          <el-input v-model="searchForm.id" clearable  class="pc-input3-col5" placeholder="输入用户ID"></el-input>
        </el-form-item>
        <el-form-item  prop="contactPhone">
          <el-input v-model="searchForm.contactPhone" clearable  class="pc-input3-col5" placeholder="输入联系人电话"></el-input>
        </el-form-item>
        <el-form-item  prop="contactName">
          <el-input v-model="searchForm.contactName" clearable  class="pc-input3-col5" placeholder="输入联系人姓名"></el-input>
        </el-form-item>
        <el-form-item class="multiply-selet"  prop="fromSource">
          <el-select collapse-tags v-model="searchForm.fromSource" placeholder="选择注册来源" class="pc-input3-col4">
            <el-option v-for="item in originOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item  v-if="isshowMore" prop="companyName">
          <el-input v-model="searchForm.companyName" clearable  class="pc-input3-col5" placeholder="输入公司全称"></el-input>
        </el-form-item>
        <el-form-item v-if="isshowMore" prop="createdTime">
          <el-date-picker class="pc-input-col3"
                          v-model="searchForm.createdTime"
                          type="datetimerange"
                          :editable="false"
                          start-placeholder="注册开始日期"
                          end-placeholder="注册结束日期"
                          format="yyyy-MM-dd HH:mm"
                          value-format="yyyy-MM-dd HH:mm"
                          @change="getDate"
                          align="right" >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="queryDataFn">搜索</el-button>
          <el-button type="primary" @click="refresh('searchForm')">刷新</el-button>
          <el-button @click="showMore()">{{showMoreText}}</el-button>
        </el-form-item>
      </div>
    </el-form>
    <egrid v-if="this.roleType===2" border
           :data="tableData"
           :columns="columns"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps"
           :columns-handler="columnsHandler">
    </egrid>
    <egrid v-if="this.roleType===1" border
           :data="tableData"
           :columns="columnsAdmin"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps"
           :columns-handler="columnsHandler">
    </egrid>
    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryRoleList"  :queryData="searchForm" @on-query="queryCallBackFn">
      </pc-pagination>
    </div>
    <pc-dialog :is-show="isShowEditDialog" title ='编辑用户' @on-close="closeAudit">
      <div >
        <edit :detailData="detailData" @closeRefresh="closeRefresh"></edit>
      </div>
    </pc-dialog>
    <pc-dialog :is-show="isShowViewDialog"  title ='查看用户' @on-close="isShowViewDialog = false">
      <div >
        <user :detailData="detailData"></user>
      </div>
    </pc-dialog>
  </div>
</template>
<script>
  import PcDialog from 'components/dialog';
  import Edit from '../edit/index';
  import User from '../viewUser/index';
  import PcPagination from 'components/form/pagination';
  import EgridCellView from 'components/wms/comm/EgridCellView';

  let that;
  var Btn = {
    template:
      `<div style="display:flex; width: 100%;flex-wrap: wrap">
          <el-button  type="primary"  plain   v-permission="['wms:baseinfo:viewclient']" @click="toDetail(row)">详情</el-button>
              <el-button  type="danger"  plain v-permission="['wms:baseinfo:editclient']"  @click="toEdit(row)">编辑</el-button>
      </div>`,
    props: ['row'],
    methods: {
      toEdit(row) {
        this.$emit('to-edit', row);
      },
      toDetail(row) {
        this.$emit('to-detail', row);
      }
    }
  };
  var BtnAdmin = {
    template:
      `<div style="display:flex; width: 100%;flex-wrap: wrap">
          <el-button  type="primary"  plain   v-permission="['wms:baseinfo:viewclient']" @click="toDetail(row)">详情</el-button>
      </div>`,
    props: ['row'],
    methods: {
      toDetail(row) {
        this.$emit('to-detail', row);
      }
    }
  };
  export default {
    components: {
      PcDialog, PcPagination, User, Edit, EgridCellView
    },
    created () {
      this.roleType = parseInt(this.$store.getters.getRoleId);
      that = this;
    },
    data () {
      return {
        showMoreText: '更多',
        isOpenEdit: false,
        roleType: 0, // 1超级管理员 2云仓 3 货主企业
        isshowMore: false,
        isShowEditDialog: false,
        isShowViewDialog: false,
        searchForm: {
          id: null,
          contactPhone: '',
          contactName: '',
          fromSource: null,
          companyName: '',
          createdTime: null,
          startQueryTime: null,
          endQueryTime: null
        },
        originOption: [
          {
            value: '1',
            label: '冷运'
          }, {
            value: '2',
            label: '云仓PC端'
          }, {
            value: '3',
            label: '云仓移动端'
          }
        ],
        tableData: [],
        pageUrl: {
          queryRoleList: '/maliwms/company/getManageCompanyList' // /company/getManageCompanyList
        },
        currentPage: 5,
        detailData: null,
        columns: [
          {
            label: '用户ID',
            prop: 'id'
          },
          {
            label: '联系人电话',
            prop: 'contactPhone'
          },
          {
            label: '联系人姓名',
            prop: 'contactName'
          },
          {
            label: '注册来源',
            prop: 'fromSourceDesc'
          },
          {
            label: '公司全称',
            prop: 'companyName'
          },
          {
            label: '注册时间',
            prop: 'createdTime'
          },
          {
            label: '操作',
            minWidth: 100,
            fixed: 'right',
            component: Btn,
            listeners: {
              'to-edit' (row) {
                that.toEdit(row);
              },
              'to-detail' (row) {
                that.toDetail(row);
              }
            },
            propsHandler: function ({ row, col, column }) {
              return {row, col, column};
            }
          }
        ],
        columnsAdmin: [
          {
            label: '用户ID',
            prop: 'id'
          },
          {
            label: '联系人电话',
            prop: 'contactPhone'
          },
          {
            label: '联系人姓名',
            prop: 'contactName'
          },
          {
            label: '注册来源',
            prop: 'fromSourceDesc'
          },
          {
            label: '公司全称',
            prop: 'companyName'
          },
          {
            label: '注册时间',
            prop: 'createdTime'
          },
          {
            label: '操作',
            minWidth: 100,
            fixed: 'right',
            component: BtnAdmin,
            listeners: {
              'to-detail' (row) {
                that.toDetail(row);
              }
            },
            propsHandler: function ({ row, col, column }) {
              return {row, col, column};
            }
          }
        ],
        columnsSchema: {
          '公司全称': {
            minWidth: 180,
            component: EgridCellView
          }
        },
        columnsProps: {
          height: 40,
          minWidth: 100,
          showOverflowTooltip: true
        }
      };
    },
    methods: {
      closeRefresh() {
        this.successTip('提交成功');
        this.isShowEditDialog = false;
        this.isShowViewDialog = false;
        this.refresh('searchForm');
      },
      showMore () {
        this.isshowMore = !this.isshowMore;
        if (this.isshowMore) {
          this.showMoreText = '收起';
        } else {
          this.showMoreText = '更多';
        }
      },
      // 表头样式
      queryDataFn() {
        this.$refs.pcPagination.queryListWithPageFn(true);
      },
      getDate () {
        if (this.searchForm.createdTime === null) {
          this.searchForm.startQueryTime = '';
          this.searchForm.endQueryTime = '';
        } else {
          this.searchForm.startQueryTime = this.searchForm.createdTime[0];
          this.searchForm.endQueryTime = this.searchForm.createdTime[1];
        }
      },
      queryCallBackFn (res) {
        this.tableData = res.result.list;
      },
      refresh(formName) {
        this.$refs[formName].resetFields();
        this.searchForm.startQueryTime = '';
        this.searchForm.endQueryTime = '';
        this.queryDataFn();
      },
      toEdit(item) {
        let id = item.id;
        this.isOpenEdit = true;
        this.getAuditData(id);
        this.isShowEditDialog = true;
      },
      getAuditData(companyId) {
        let that = this;
        that.ajax({
          type: 'GET',
          url: '/maliwms/company/getCompanyById?companyId=' + companyId,
          loading: true,
          success: (res) => {
            setTimeout(() => {
              that.$pcNProgress.done();
            }, 300);
            if (res && res.code === 200) {
              // 请求成功之后执行
              that.detailData = res.result;
              if (this.isOpenEdit) {
                let busLicenseImgArr = [];
                let fileExtensionBusLicenseImg = res.result.busLicenseImg.substring(res.result.busLicenseImg.lastIndexOf('.') + 1);
                let fileNameBusLicenseImg = '营业执照照片.' + fileExtensionBusLicenseImg;
                let singleBusLicenseImg = {name: fileNameBusLicenseImg, url: res.result.busLicenseImg};
                if (res.result.singleBusLicenseImg === '') {
                  busLicenseImgArr = [];
                } else {
                  busLicenseImgArr.push(singleBusLicenseImg);
                }
                that.detailData.busLicenseImg = busLicenseImgArr;
                let legalFaceIdImgArr = [];
                let fileExtensionLegalFaceIdImg = res.result.legalFaceIdImg.substring(res.result.legalFaceIdImg.lastIndexOf('.') + 1);
                let fileNameLegalFaceIdImg = '身份证正面照.' + fileExtensionLegalFaceIdImg;
                let singleLegalFaceIdImg = {name: fileNameLegalFaceIdImg, url: res.result.legalFaceIdImg};
                if (res.result.legalFaceIdImg === '') {
                  legalFaceIdImgArr = [];
                } else {
                  legalFaceIdImgArr.push(singleLegalFaceIdImg);
                }
                that.detailData.legalFaceIdImg = legalFaceIdImgArr;
                let legalBackIdImgArr = [];
                let fileExtensionLegalBackIdImg = res.result.legalBackIdImg.substring(res.result.legalBackIdImg.lastIndexOf('.') + 1);
                let fileNameLegalBackIdImg = '身份证反面照.' + fileExtensionLegalBackIdImg;
                let singleLegalBackIdImg = {name: fileNameLegalBackIdImg, url: res.result.legalBackIdImg};
                if (res.result.legalBackIdImg === '') {
                  legalBackIdImgArr = [];
                } else {
                  legalBackIdImgArr.push(singleLegalBackIdImg);
                }
                that.detailData.legalBackIdImg = legalBackIdImgArr;
              }
            }
          }
        });
      },
      closeAudit () {
        this.isShowEditDialog = false;
      },
      toDetail(item) {
        let id = item.id;
        this.isOpenEdit = false;
        this.getAuditData(id);
        this.isShowViewDialog = true;
      },
      columnsHandler() {}
    }
  };
</script>
<style scoped>
  .el-table th.is-leaf{
    background:#f5f5f5!important;
  }
  .el-table th.is-leaf .cell{
   /* font-size:16px!important;*/
  }
  /*.multiply-selet .pc-input3-col3{*/
  /*width:331px!important;*/
  /*}*/
  /*.multiply-selet .pc-input3-col5{*/
  /*width:331px!important;*/
  /*}*/
</style>
